<template>
  <view class="factory-container home-container">
    <view>
      <view class="data-body default-box data-bord">
        <wd-row>
          <wd-col :span="8">
            <view class="grid-data">
              <view>1000kg</view>
              <view>我的茶籽</view>
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="grid-data">
              <view>1000kg</view>
              <view>
                我的得油
                <!-- <img src="" alt="" /> -->
              </view>
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="grid-data">
              <view>1000kg</view>
              <view>我的提油</view>
            </view>
          </wd-col>
        </wd-row>
      </view>
      <view class="data-img">
        <wd-row>
          <wd-col :span="12">
            <view class="grid-img data-bord default-box">
              <view class="image-placeholder">图片占位符</view>
              <view
                class="action-button oil-change-btn"
                @click="handelCell({ name: 'ExchangeCreateOrder' })"
              >
                我要换油
              </view>
            </view>
          </wd-col>
          <wd-col :span="12">
            <view class="grid-img data-bord default-box">
              <view class="image-placeholder">图片占位符</view>
              <view
                class="action-button oil-extract-btn"
                @click="handelCell({ name: 'ExtractOrder' })"
              >
                我要提油
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useRouter } from '@/plugin/uni-mini-router'
import { getRouterIsLogined } from '@/hooks/useCheckLogin'

const router = useRouter()

const handelCell = (item) => {
  getRouterIsLogined()
  router.push({
    name: item.name,
  })
}
</script>
<style lang="scss" scoped>
@import '@/style/custom/home.scss';
@import '@/style/custom/variables.scss';

.factory-container {
  padding-bottom: 20upx;
}

.data-img {
  margin-top: 30upx;
}

.grid-img {
  padding: 20upx;
  text-align: center;
}

.image-placeholder {
  height: 200upx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30upx;
  border-radius: 10upx;
  color: #999;
}

.action-button {
  background-color: $primary-color;
  color: white;
  border-radius: 50upx;
  padding: 20upx;
  font-size: 32upx;
  /* font-weight: bold; */
  cursor: pointer;
  transition: all 0.3s;
}

.action-button:active {
  opacity: 0.8;
}
</style>
